<html xmlns:th="http://www.thymeleaf.org" >
  <head >
      <script src="/plugins/modernizr/js/modernizr.js"></script>
      <script src="/js/jquery.mmenu.min.js"></script>
      <!-- Vendor CSS-->
      <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
      <link href="/vendor/skycons/css/skycons.css" rel="stylesheet" />
      <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

      <!-- Plugins CSS-->
      <link href="/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
      <link href="/plugins/scrollbar/css/mCustomScrollbar.css" rel="stylesheet" />
      <link href="/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
      <link href="/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
      <link href="/plugins/xcharts/css/xcharts.min.css" rel="stylesheet" />
      <link href="/plugins/morris/css/morris.css" rel="stylesheet" />

      <!-- Theme CSS -->
      <link href="/css/jquery.mmenu.css" rel="stylesheet" />

      <!-- Page CSS -->
      <link href="/css/style.css" rel="stylesheet" />
      <link href="/css/add-ons.min.css" rel="stylesheet" />

  </head>
  <body>

  <div id="collectContent" class="row"  style="display: none" th:fragment="findByFavorite">
      <!--  -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
      <button   class="btn btn-primary btn-lg" data-toggle="modal" onclick="deletefavorite()"  style="margin:20px 20px 20px ; margin-left: 80%" >
          删除收藏夹
      </button>
      <div class="modal-body" style="margin:0px 0px 20px 20px; font-size: 18px; color:#000;">
          删除收藏夹后
          收藏夹内收藏的网页将一并放入回收站。
      </div>
      <!-- 模态框（Modal） -->
 <!--     <div class="modal fade" th:id="mymodel'+${collect.getId()}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                          &times;
                      </button>
                      <h4 class="modal-title" id="myModalLabel">
                          删除收藏夹
                      </h4>
                  </div>
                  <div class="modal-body">
                      确定删除您的收藏夹？
                      收藏夹内收藏的网页将一并删除
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                      </button>
                      <button type="button"  class="btn btn-primary"th:onclick="deletefavorite()">
                          确定
                      </button>
                  </div>
              </div>&lt;!&ndash; /.modal-content &ndash;&gt;
          </div>&lt;!&ndash; /.modal &ndash;&gt;
      </div>-->

      <div id="collectBox1-c" th:fragment="collectBox1" >
          <div  class="col-sm-12"  th:each="collect:${collectList}">

              <div class="panel panel-accordion">
                  <div class="panel-heading bk-bg-primary">
                      <h4 class="panel-title">
                          <a class="accordion-toggle" data-toggle="collapse" style="text-decoration:none;" data-parent="#accordionInfo" href="#collapseInfoOne"th:text="${collect.title}">
                              spring-boot - 纯洁的微笑博客
                          </a>
                      </h4></div>


                  <div id="collapseInfo11" class="accordion-body clearfix"  >
                      <a  style="color:#5e5e5e;text-decoration:none;" th:href="${collect.url}">
                          <img  th:src="${collect.logoUrl}" alt="" height="100px;" width="100px;" style="float: left; margin: 10px 10px 10px 10px;">
                          <div class="panel-body"th:text="${collect.category}" style="overflow: hidden; width: 900px; height:100px;float: left; line-height: 20px;" >内容</div>
                      </a>
                  </div>


                  <div class="modal fade" th:id="'delCollect1'+${collect.getId()}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                      <div class="modal-dialog">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                      &times;
                                  </button>
                                  <h4 class="modal-title" >
                                      删除此收藏
                                  </h4>
                              </div>
                              <div class="modal-body">
                                  确定删除您收藏的网页？
                              </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                  </button>
                                  <button type="button" class="btn btn-default"  data-dismiss="modal" th:onclick="'delCollect1('+${collect.getId()}+')'" >
                                      确定
                                  </button>
                              </div>
                          </div><!-- /.modal-content -->
                      </div><!-- /.modal -->
                  </div>




                  <div style="width: 100%; margin-bottom: 20px;">
											<span style="margin-left: 60%; ">
												<a th:id="'commentSize1'+${collect.getId()}" th:onclick="'opeanview1('+ ${collect.getId()}+')'" style="cursor: pointer; color:#5e5e5e;"><i  class="glyphicon glyphicon-comment" th:text="${collect.getCommentSize()}"></i> </a>
											</span>

                      <a th:onclick="'getUserPersional('+ ${collect.getUserId()}+')'" style="cursor: pointer; color: #5e5e5e"><i class="	glyphicon glyphicon-user" style="margin-left:30px " th:text="' '+${collect.getUserName()}"></i></a>
                      <i class="	glyphicon glyphicon-folder-close" style="margin-left:30px " th:text="' '+${collect.getFavoriteName()}"></i>
                      <button class="btn" th:id="'#delCollectBtn'+${collect.getId()}" style="margin-left:30px;" data-toggle="modal" th:data-target="'#delCollect1'+${collect.getId()}" >删除</button>
                  </div>
                  <ul  th:id="'n'+${collect.getId()}" style="width:1100px; margin:0 auto;  list-style: none; display: none;">

                      <li>
                          <p class="clearfix">
                              <input type="text" th:id="'viewContent1'+${collect.getId()}" style="height: 30px; width: 1000px; " placeholder="请输入评论内容">
                              <button th:onclick="'CommentBtn1('+${collect.getId()}+')'">提交</button>
                              <button style="cursor: pointer; float: right; margin:8px 12px 0 0;"  th:onclick="'closeview1('+ ${collect.getId()}+')'">收起</button>
                          </p>
                      </li>
                      <li  th:id="'commentTable1'+${collect.getId()}" >
                          <table style="margin-left: 20px;" th:each="commentList:${collect.getCommentList()}">
                              <tr>
                                  <td style="color: #0a0a0a;" th:text="${commentList.getSendUserName()}+' : '"></td>
                                  <td th:text="${commentList.getContent()}"></td>
                                 <!-- <td><button th:onclick="'delitedComment('+ ${commentList.getId()}+')'">删除</button></td>-->
                              </tr>
                          </table>

                      </li>

                  </ul>

              </div>
          </div>

      </div>


      <script>
          function opeanview1(id) {
              $("#n"+id).show();
          }
          function closeview1(id) {
              $("#n"+id).hide();
          }
          function toindex1(){
              window.location.reload();
          }


          function getUserPersional(id){
              $("#content3").hide();//显示输入框
              $("#collectContent").hide();//隐藏收藏内容
              $("#collectButton").hide();//隐藏收藏按钮
              $("#collect-cont").hide();
              $("#noRead").hide();//影藏未读列表
              $("#personal-data").hide();
              $("#mypersonal-data").hide();
              $("#personal-search").hide();
              $("#allpersonal-data").show();
              $("#allpersonal-data").load("/followOnePersonal?id="+id);
          }
          function delCollect1(id) {//删除个人收藏

              $.ajax({
                  type:"POST",
                  dataType:"JSON",
                  contentType: "application/json;charset=UTF-8",
                  url:"/deleteCollect",
                  data:JSON.stringify({
                      id: id
                  }),
                  success:
                      function(Response) {
                          if(Response.code ==0){
                              $("#collectBox1-c").load("/getCollectByFavoriteId?id="+id1);
                          }
                      }
              })
              $(".modal-backdrop").hide();
          }
          function CommentBtn1(collectid) {
              $.ajax({
                  type:"POST",
                  dataType:"JSON",
                  contentType: "application/json;charset=UTF-8",
                  url:"/addComment",
                  data:JSON.stringify({
                      content:$("#viewContent1"+collectid).val(),
                      sendUserId:localStorage.getItem("id"),
                      collectId:collectid
                  }),
                  beforeSend: function (XMLHttpRequest) {
                      XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
                  },
                  success:function (Response) {
                      if(Response.code == 0){
                          $("#commentTable1"+collectid).html(" ");
                          $("#commentSize1"+collectid).html('<i  class="glyphicon glyphicon-comment"></i>'+Object.keys(Response.msg).length);
                          Response.msg.forEach(function (item,index){
                              $("#commentTable1"+collectid).html($("#commentTable1"+collectid).html()+
                                  '<table style="margin-left: 20px;"><tr><td style="color: #0a0a0a;" >'+item.sendUserName+':</td><td >'+ item.content+'</td></tr></table>'
                              )

                          })
                      }else console.log(msg)
                  }

              })
          }


          function  deletefavorite() {
              $(".modal-backdrop").show();
              $.ajax({
                  type:"POST",
                  dataType:"JSON",
                  contentType: "application/json;charset=UTF-8",
                  url:"/deleteFavorite",
                  data:JSON.stringify({
                      id:id1
                  }),
                  success:function (Response) {
                      if(Response.code==0){
                          location.reload();
                      }
                  }
              })

              $(".modal-backdrop").hide();
          }
      </script>
  </div>




  <script src="/vendor/js/jquery.min.js"></script>
  <script src="/vendor/js/jquery-2.1.1.min.js"></script>
  <script src="/vendor/js/jquery-migrate-1.2.1.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/vendor/skycons/js/skycons.js"></script>

  <!-- Plugins JS-->
  <script src="/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
  <script src="/plugins/scrollbar/js/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="/plugins/bootkit/js/bootkit.js"></script>
  <script src="/plugins/moment/js/moment.min.js"></script>
  <script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
  <script src="/plugins/touchpunch/js/jquery.ui.touch-punch.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.pie.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.resize.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.stack.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.time.min.js"></script>
  <script src="/plugins/xcharts/js/xcharts.min.js"></script>
  <script src="/plugins/autosize/jquery.autosize.min.js"></script>
  <script src="/plugins/placeholder/js/jquery.placeholder.min.js"></script>
  <script src="/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
  <script src="/plugins/datatables/js/jquery.dataTables.min.js"></script>
  <script src="/plugins/raphael/js/raphael.min.js"></script>
  <script src="/plugins/morris/js/morris.min.js"></script>
  <script src="/plugins/gauge/js/gauge.min.js"></script>
  <script src="/plugins/d3/js/d3.min.js"></script>
  </body>
</html>
